<template>
  <!-- 头部 -->
  <div class="home">
    <header>
      <div class="notice_box">
        <!-- <img src="@/assets/image/home/Notice.png" alt="" class="notice_icon"> -->
        <vue-seamless-scroll class="warp" :data="noticeData" :class-option="classOption">
          <ul class="item">
            <li v-for="(item, index) in noticeData" :key="index">
              <span class="title">{{ item.name }}</span>
              <span class="date"> {{ item.amount }}</span>
              <span class="ratio" :class="item.isNegative?'green':'red' ">
                <i v-if="item.isNegative">↓</i><i v-else>↑</i>{{ item.value }}
              </span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <web-nav :menulist="menuData"></web-nav>
      <!-- <div class="nav">
        <div class="logo">
          <img src="@/assets/image/home/logo.png" alt="">
        </div>
        <div class="menu">
          <ul>
            <li v-for="(item,index) in menuData" :key="index" @click="gomenus(item)">
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div> -->
    </header>
    <div class="mod1">
      <div class="company">
        <div class="titleOne">
          <img src="@/assets/image/home/zsr.png" alt="">
          <img src="@/assets/image/home/公司数据.png" alt="">
          <img src="@/assets/image/home/zsl.png" alt="">
        </div>
        <div style="display: flex;">
          <div class="annular">
            <div id="Annular"></div>
            <ul class="legend">
              <li v-for="(item,index) in AnnularData" :key="index" :style="getStyle(index)">
                <span><i class="qua" :style="getStyleq(index)"></i> {{ item.name }}</span>
                <span v-if="index == 0">{{ item.data }}万家</span>
                <span v-else>{{ item.data }}万个</span>
              </li>
            </ul>
          </div>
          <div id="relation"></div>
        </div>
        <ul class="link_l" style="justify-content: center; ">
          <li v-for="(item,index) in linkList" :key="index" @click="gomenus(item)">
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <div style="display: flex;">
          <div class="heat">
            <div class="titleTow">
              <img src="@/assets/image/home/热数.png" alt="">
              <img src="@/assets/image/home/zsl.png" alt="">
            </div>
            <div id="heat"></div>
          </div>
          <div class="macro">
            <div class="titleTow">
              <img src="@/assets/image/home/宏观经济.png" alt="">
              <img src="@/assets/image/home/zsl.png" alt="">
            </div>
            <div class="macro_cneter">
              <div class="ma_l">
                <div class="titlwThree"><i></i> 全国季度GDP(单位：亿元)</div>
                <div id="quarterBar"></div>
              </div>
              <div class="ma_r">
                <div class="titlwThree"><i></i> 经济学家信心指数</div>
                <div id="quarter"></div>
                <img class="qubg" src="@/assets/image/home/bg.png" alt="">
              </div>
            </div>
            <ul class="macrolink">
              <li v-for="(item,index) in Macrolink" :key="index" @click="gomenus(item)">
                <span>{{ item.name }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="mod2">
      <div class="region">
        <div class="titleOne">
          <img src="@/assets/image/home/zsr.png" alt="">
          <img src="@/assets/image/home/区域经济.png" alt="">
          <img src="@/assets/image/home/zsl.png" alt="">
        </div>
        <div class="titlwThree"><i></i> 全国省市县GDP(单位;亿元&nbsp;&nbsp;时间:<span style="color:darkgoldenrod">{{ nationTime }}</span>)</div>
        <div class="region_box">
          <div id="nation"></div>
          <div id="province"></div>
          <div id="county" style="width: 448px;" v-show="countyshow"></div>
        </div>
        <ul class="link" style="margin-top:50px;justify-content: center;">
          <li v-for="(item,index) in reginLink" :key="index" @click="gomenus(item)">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="mod3">
      <div class="industry">
        <div class="titleOne">
          <img src="@/assets/image/home/zsr.png" alt="">
          <img src="@/assets/image/home/工业经济.png" alt="">
          <img src="@/assets/image/home/zsl.png" alt="">
        </div>
        <div class="industry_center">
          <div class="industry_le">
            <div class="titlwThree"><i></i> 工业产品产量(单位:吨)</div>
            <div id="yield"></div>
          </div>
          <div class="industry_re">
            <div class="titlwThree"><i></i> 工业财务情况(单位:亿元&nbsp;&nbsp;时间: <span style="color:darkgoldenrod">{{ industryTime }}</span>)</div>
            <div id="finance"></div>
          </div>
        </div>
        <ul class="link" style="justify-content: center;">
          <li v-for="(item,index) in industryLink" :key="index" @click="gomenus(item)">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="mod4">
      <div class="exports">
        <div class="titleOne">
          <img src="@/assets/image/home/zsr.png" alt="">
          <img src="@/assets/image/home/进出口数据.png" alt="">
          <img src="@/assets/image/home/zsl.png" alt="">
        </div>
        <div class="exports_box">
          <div class="exports_le">
            <div class="titlwThree"><i></i> 中国对各大洲进出口总额(单位:{{ exportsunit }} &nbsp;&nbsp;时间: <span style="color:darkgoldenrod">{{ exportsTime }}</span>)</div>
            <div id="continent"></div>
          </div>
          <div class="exports_rg">
            <div class="ex_head"><span>商品编码</span><span>商品名称</span></div>
            <vue-seamless-scroll :data="commodityList" class="seamless-warp">
              <ul class="item">
                <li v-for="( item,index ) in commodityList" :key="index">
                  <span class="code" v-text="item.code"></span>
                  <span class="name" v-text="item.name"></span>
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <ul class="link" style="justify-content: center;">
          <li v-for="(item,index) in exportsLink" :key="index" @click="gomenus(item)">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="mod5">
      <data class="PriceIndustry">
        <div class="price">
          <div class="titleTow">
            <img src="@/assets/image/home/价格数据.png" alt="">
            <img src="@/assets/image/home/zsl.png" alt="">
          </div>
          <div class="titlwThree" style="margin-top: 10px;"><i></i> 部分油类价格(单位:美元/吨)</div>
          <div id="price"></div>
          <ul class="link_p">
            <li v-for="(item,index) in Pricelink" :key="index" @click="gomenus(item)">
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="industry">
          <div class="titleTow">
            <img src="@/assets/image/home/行业数据.png" alt="">
            <img src="@/assets/image/home/zsl.png" alt="">
          </div>
          <div class="titlwThree" style="margin-top: 10px;"><i></i> 农林牧渔业增加值(单位：亿元 &nbsp;&nbsp;时间: <span style="color:darkgoldenrod">{{ MdindustryTime }}</span>)</div>
          <div id="Mdindustry"></div>
          <ul class="link">
            <li v-for="(item,index) in Mdindustrylink" :key="index" @click="gomenus(item)">
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </data>
    </div>
    <div class="mod6">
      <div class="Subject">
        <div class="titleOne">
          <img src="@/assets/image/home/zsr.png" alt="">
          <img src="@/assets/image/home/专题数据.png" alt="">
          <img src="@/assets/image/home/zsl.png" alt="">
        </div>
        <div class="Subject_box">
          <div class="Subjec_le">
            <h3 class="worldTitle">一带一路国家GDP(单位:亿美元 &nbsp;&nbsp;时间: <span style="color:darkgoldenrod">{{ SubjectTime }}</span>)</h3>
            <div id="world"></div>
          </div>
          <div class="Subjec_rg">
            <div id="Retirement"></div>
          </div>
        </div>
        <ul class="link" style="justify-content: center;">
          <li v-for="(item,index) in subjectlink" :key="index" @click="gomenus(item)">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- <div class="banner">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item,index) in bannerData" :key="index">
          <img :src="item.path" alt="">
          <p>数据库、模型库、方法库<br/>一体的操作型智库服务平台</p>
        </swiper-slide>
      </swiper>
    </div> -->
    <div class="mod7">
      <div class="kno_box">
        <div class="kno">
          <h2 class="title">即将上线</h2>
          <ul>
            <li v-for="(item,index) in Expectationlist" :key="index"><i></i>{{ item.name }}</li>
            <li><i></i>...</li>
          </ul>
        </div>
        <div class="kno">
          <h2 class="title">统计知识</h2>
          <ul>
            <li v-for="(item,index) in knowledgelist" :key="index"><i></i>{{ item.name }}</li>
          </ul>
        </div>
      </div>
    </div>
    <com-foot></com-foot>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import vueSeamlessScroll from 'vue-seamless-scroll'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import comFoot from '../components/comfoot'
import 'swiper/dist/css/swiper.css'
import world from '@/assets/json/world.json'
import webNav from '@/components/webnav'
export default {
  data() {
    return {
      world: world,
      nationTime:'',
      SubjectTime:'',
      MdindustryTime:'',
      exportsTime:'',
      industryTime:'',
      countyshow: false,
      classOption: {
        limitMoveNum: 2,
        direction: 2,
        hoverStop: false
      },
      color: ['#78C3A0', '#F7D532', '#3BB2EC', '#FF8959'],
      color2: ['120,195,160,0.36', '247,212,50,0.36', '59,178,236,0.36', '255,137,89,0.36'],
      swiperOption: {
        effect: 'fade',
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        }
      },
      exportsunit: '',
      quarter: '',
      noticeData: [],
      bannerData: [],
      menuData: [],
      AnnularData: [],
      linkList: [],
      industryLink: [],
      Macrolink: [],
      exportsLink: [],
      commodityList: [],
      Pricelink: [],
      Mdindustrylink: [],
      subjectlink: [],
      knowledgelist: [],
      Expectationlist: [],
      reginLink: [],
      nationmap: { regionCode: '130000', name: '河北省' },
      countymap: { regionCode: '130100', name: '石家庄市' },
    }
  },
  components: {
    comFoot,
    webNav,
    swiper,
    swiperSlide,
    vueSeamlessScroll
  },
  mounted() {
    // this.goinit()
    this.getNotice()
    this.getregion()
    this.getprovince()
    this.getcounty()
    this.getMenu()
    this.getBanner()
    this.getrelation()
    this.getAnnular()
    this.getHeat()
    this.getMacro()
    this.getindustry()
    this.getExports()
    this.getPrice()
    this.getMdindustry()
    this.getSubject()
    this.getExpectation()
  },
  methods: {
    ...mapMutations(['setBreadcrumb']),
    getStyle(index) {
      return {
        border: `1px solid ${this.color[index]}`,
        background: `rgba(${this.color2[index]})`
      }
    },
    getStyleq(index) {
      return {
        border: `4px solid ${this.color[index]}`
      }
    },
    // goinit() {
    //   var ipv6 = "";
    //   var old_token = localStorage.getItem('TOKEN_KEY')
    //   if (old_token == null) {
    //     old_token = "1"
    //   }
    //   let self = this;
    //   $.getJSON("https://v4v6.ipv6-test.com/json/widgetdata.php?callback=?", function (result) {
    //     if (result.proto == "ipv6") {
    //       ipv6 = result.address;
    //     }
    //     console.log(ipv6)
    //     self.$axios.request({
    //       url: "5000/oauth/get/token",
    //       method: "post",
    //       headers: {
    //         'Content-Type': 'application/x-www-form-urlencoded',
    //       },
    //       params: {
    //         access_token: old_token,
    //       }
    //     }).then(res => {
    //       let token = res.data.access_token
    //       if (old_token == null || old_token != token) {
    //         self.$axios.request({
    //           url: "5000/authentication/ipfree",
    //           method: "post",
    //           headers: {
    //             'Content-Type': 'application/x-www-form-urlencoded',
    //             'client-id': 'webApp',
    //             'client-secret': 'webApp',
    //           },
    //           params: {
    //             ipv6: ipv6,
    //           }
    //         })
    //           .then(res => {
    //             let old_token = localStorage.getItem('TOKEN_KEY')
    //             let token = res.data.access_token
    //             if (!old_token || old_token != token) {
    //               localStorage.setItem('TOKEN_KEY', token)
    //               // 添加登录信息埋点

    //               self.$router.push('/index')
    //               window.location.reload();
    //             }
    //           }).catch((error) => {
    //             if (error.response.status === 401 && error.response.data.resp_msg === "此账号已过期") {
    //               self.$message({
    //                 message: error.response.data.resp_msg,
    //                 type: 'error',
    //                 duration: 3000,
    //                 onClose: function () {
    //                   console.log('消息框已关闭');
    //                 },
    //                 showClose: true
    //               });
    //               let old_token = localStorage.getItem('TOKEN_KEY')

    //               if (old_token != null) {
    //                 localStorage.clear()
    //                 window.location.reload();
    //               } else {
    //                 localStorage.clear()
    //                 self.$router.push('/login')
    //                 window.location.reload();
    //               }


    //             }
    //           })
    //       }
    //     }).catch((error) => {
    //       self.$axios.request({
    //         url: "5000/authentication/ipfree",
    //         method: "post",
    //         headers: {
    //           'Content-Type': 'application/x-www-form-urlencoded',
    //           'client-id': 'webApp',
    //           'client-secret': 'webApp',
    //         },
    //         params: {
    //           ipv6: ipv6,
    //         }
    //       }).then(res => {
    //         let old_token = localStorage.getItem('TOKEN_KEY')
    //         let token = res.data.access_token
    //         if (!old_token || old_token != token) {
    //           localStorage.setItem('TOKEN_KEY', token)

    //           self.$router.push('/index')
    //           window.location.reload();
    //         }
    //       }).catch((error) => {
    //         if (error.response.status === 401 && error.response.data.resp_msg === "此账号已过期") {
    //           self.$message({
    //             message: error.response.data.resp_msg,
    //             type: 'error',
    //             duration: 3000,
    //             onClose: function () {
    //               console.log('消息框已关闭');
    //             },
    //             showClose: true
    //           });
    //           let old_token = localStorage.getItem('TOKEN_KEY')
    //           if (old_token != null) {
    //             localStorage.clear()
    //             window.location.reload();
    //           }
    //         }
    //       })
    //     })
    //   });
    // },
    // 区域经济
    getregion() {
      var self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '27'
        },
      }).then(function (response) {
        self.reginLink = response.data.data1
      })
      this.getnation()
    },
    // 获取全国地图数据
    getnation() {
      var self = this
      var timeFn = null;
      var myChart = this.$echarts.init(document.getElementById("nation"));
      this.$axios.request({
        url: "5700/home/getMapData",
        method: "get",
        params: {
          regionCode: 100000
        },
      }).then(function (response) {
        let mapjson = response.data.boundary
        let mapdata = response.data.data
        let maxData = response.data.maxData
        self.nationTime = response.data.time
        self.$echarts.registerMap('china', mapjson);
        var chartOption = {
          tooltip: {
            textStyle: {
              color: '#536BAE',
              fontWeight: 400,
              fontSize: 12
            },
            formatter: function (params) {
              return (`<div style="display: flex;flex-direction: column;"><span>${params.name}</span><span style="color: #020B15;font-size: 12px;">GDP: ${params.data.value[2]} 亿元</span></div>`);
            }
          },
          geo: {
            map: 'china',
            roam: false,
            layoutCenter: ["50%", "50%"],
            zoom: 1.3,
            itemStyle: {
              normal: {
                areaColor: '#97B8C7',
                shadowColor: '#9FCDF2',
                shadowOffsetX: 4,
                shadowOffsetY: 9
              },
            },
            regions: [{
              name: '南海诸岛',
              itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)',
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  }
                }
              },
            }],
          },
          visualMap: {
            type: "continuous",
            text: ["", ""],
            showLabel: true,
            left: "-50",
            min: 1,
            max: maxData,
            inRange: {
              color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
            },
            splitNumber: 0,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: "MAP",
              type: "map",
              mapType: 'china',
              selectedMode: "false",
              zoom: 1.3,
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                borderColor: "#7B9EA8",
                borderWidth: 1,
              },
              data: mapdata
            }
          ]
        }
        myChart.setOption(chartOption, true);
        myChart.on("click", function (params) {
          self.nationmap = {
            name: params.data.name,
            regionCode: params.data.regionCode
          }
          clearTimeout(timeFn);
          timeFn = setTimeout(function () {
            self.$nextTick(() => {
              self.getprovince()
            })
          }, 250)
        })
      })
    },
    // 市
    getprovince() {
      var self = this
      var timeFn = null;
      const { name, regionCode } = this.nationmap
      var myChart = this.$echarts.init(document.getElementById("province"));
      this.$axios.request({
        url: "5700/home/getMapData",
        method: "get",
        params: {
          regionCode: regionCode
        },
      }).then(function (response) {
        let mapjson = response.data.boundary
        let mapdata = response.data.data
        let maxData = response.data.maxData
        const { capitalCityName, capitalCityCode } = response.data
        self.countymap = {
          name: capitalCityName,
          regionCode: capitalCityCode
        }
        if (!['110000', '120000', '500000', '310000'].includes(regionCode)) {
          self.countyshow = true
          self.getcounty()
        } else {
          self.countyshow = false
        }
        self.$echarts.registerMap(name, mapjson);
        var chartOption = {
          title: {
            text: name,
            textStyle: {
              color: '#fff',
              fontSize: 24
            },
            left: 'center',
            bottom: 50
          },
          tooltip: {
            textStyle: {
              color: '#536BAE',
              fontWeight: 400,
              fontSize: 12
            },
            formatter: function (params) {
              if (params.data)
                return (`<div style="display: flex;flex-direction: column;"><span>${params.name}</span><span style="color: #020B15;font-size: 12px;">GDP: ${params.data.value[2]} 亿元</span></div>`);
            }
          },
          geo: {
            map: name,
            roam: false,
            layoutCenter: ["50%", "50%"],
            zoom: 0.98,
            itemStyle: {
              normal: {
                areaColor: '#97B8C7',
                shadowColor: '#9FCDF2',
                shadowOffsetX: 4,
                shadowOffsetY: 9
              },
            },
            regions: [{
              name: '南海诸岛',
              itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)',
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  }
                }
              },
            }],
          },
          visualMap: {
            type: "continuous",
            text: ["", ""],
            showLabel: false,
            left: "-50",
            min: 1,
            max: maxData,
            inRange: {
              color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
            },
            splitNumber: 0,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: "MAP",
              type: "map",
              mapType: name,
              selectedMode: "false",
              zoom: 0.98,
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              itemStyle: {
                borderColor: "#7B9EA8",
                borderWidth: 1,
              },
              data: mapdata
            }
          ]
        }
        myChart.setOption(chartOption, true);
        myChart.on("click", function (params) {
          clearTimeout(timeFn);
          timeFn = setTimeout(function () {
            self.countymap = {
              name: params.data.name,
              regionCode: params.data.regionCode
            }
            self.$nextTick(() => {
              self.getcounty()
            })
          }, 250)
        })
      })
    },
    // 区，县
    getcounty() {
      var self = this
      const { name, regionCode } = this.countymap
      var myChart = this.$echarts.init(document.getElementById("county"));
      this.$axios.request({
        url: "5700/home/getMapData",
        method: "get",
        params: {
          regionCode: regionCode
        },
      }).then(function (response) {
        let mapjson = response.data.boundary
        let mapdata = response.data.data
        let maxData = response.data.maxData
        self.$echarts.registerMap(name, mapjson);
        var chartOption = {
          title: {
            text: name,
            textStyle: {
              color: '#fff',
              fontSize: 24
            },
            left: 'center',
            bottom: 50
          },
          tooltip: {
            textStyle: {
              color: '#536BAE',
              fontWeight: 400,
              fontSize: 12
            },
            formatter: function (params) {
              return (`<div style="display: flex;flex-direction: column;"><span>${params.name}</span><span style="color: #020B15;font-size: 12px;">GDP: ${params.data.value[2]} 亿元</span></div>`);
            }
          },
          geo: {
            map: name,
            roam: false,
            layoutCenter: ["50%", "50%"],
            zoom: 0.98,
            itemStyle: {
              normal: {
                areaColor: '#97B8C7',
                shadowColor: '#9FCDF2',
                shadowOffsetX: 4,
                shadowOffsetY: 9
              },
            },
            regions: [{
              name: '南海诸岛',
              itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)',
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  }
                }
              },
            }],
          },
          visualMap: {
            type: "continuous",
            text: ["", ""],
            showLabel: true,
            left: "-50",
            min: 1,
            max: maxData,
            inRange: {
              color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"],
            },
            splitNumber: 0,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          series: [
            {
              name: "MAP",
              type: "map",
              mapType: name,
              selectedMode: "false",
              zoom: 0.98,
              label: {
                normal: {
                  show: true,
                },
                emphasis: {
                  show: true,
                },
              },
              data: mapdata
            }
          ]
        }
        myChart.setOption(chartOption, true);
      })
    },
    // 路由跳转
    gomenus(item) {
      let old_token = localStorage.getItem('TOKEN_KEY')
      if(old_token != null){
        this.setBreadcrumb(item.breadcrumb.split(","))
        this.$router.push({ path: item.path })
      } else {
        localStorage.clear()
        this.$router.push('/login')
        window.location.reload();
      }
    },
    getExpectation() {
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '33'
        },
      }).then(function (response) {
        self.Expectationlist = response.data.data1
      })
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '34'
        },
      }).then(function (response) {
        self.knowledgelist = response.data.data1
      })
    },
    // 专题数据
    getSubject() {
      var self = this
      var myChart = this.$echarts.init(document.getElementById("Retirement"));
      myChart.showLoading();
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '32'
        },
      }).then(function (response) {
        self.subjectlink = response.data.data2
        self.SubjectTime = response.data.time
        self.getworldmap(response.data.data3)
        const processedData = Object.keys(response.data.data1["养老金社会化发放人数"]).reduce((result, year) => {
          const cities = Object.keys(response.data.data1["养老金社会化发放人数"][year]);
          cities.forEach((city) => {
            const value = parseFloat(response.data.data1["养老金社会化发放人数"][year][city]);
            const existingSeries = result.seriesData.find(series => series.name === city);
            if (existingSeries) {
              existingSeries.data.push(value);
            } else {
              result.seriesData.push({
                name: city,
                type: 'bar',
                data: [value]
              });
            }
          });
          if (!result.xAxisData.includes(year)) {
            result.xAxisData.push(year);
          }
          return result;
        }, { xAxisData: [], seriesData: [] });
        var chartOption = {
          title: {
            text: '养老金社会化发放人数(单位: 万人)',
            textStyle: {
              color: '#FFFFFF',
              fontSize: 20,
              fontWeight: 400,
              fontFamily: 'Source Han Sans CN'
            },
            left: 30
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          color: ['#C23531', '#61A0A8', '#D48265', '#91C7AE'],
          legend: {
            right: 15,
            itemGap: 25,
            itemWidth: 12,
            itemHeight: 12,
            icon: 'rect',
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              color: '#fff',
              fontSize: 14
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#666',
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              show: true,
              color: '#ccc',
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            data: processedData.xAxisData
          },
          series: processedData.seriesData
        }
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      })
    },
    // 行业数据
    getMdindustry() {
      var self = this
      var myChart = this.$echarts.init(document.getElementById("Mdindustry"));
      myChart.showLoading();
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '31'
        },
      }).then(function (response) {
        self.Mdindustrylink = response.data.data2
        self.MdindustryTime = response.data.time
        const processedData = response.data.data1.map((item, index) => {
          return {
            name: Object.keys(item)[0],
            value: parseFloat(item[Object.keys(item)[0]]),
          };
        });
        const data1 = processedData.map((item) => item.value);
        const data2 = [];
        let temp = 0;
        data1.map((item, index) => {
          data2.push(temp);
          if (index === 0) {
            temp = item
          }
          temp = Math.round(temp - data1[index + 1]);
        });
        var chartOption = {
          grid: {
            x: 10,
            x2: 10,
            y: 35,
            y2: 20,
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              fontSize: 18,
              color: '#437AAC',
            },
            borderWidth: 2,
            borderColor: '#437AAC',
            formatter: function (params, ticket, callback) {
              return (`<div style="display: flex;flex-direction: column;"><span>${params[1].value}</span><span style="color: #020B15;font-size: 12px;">${params[1].name}</span></div>`)
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'rgba(182, 183, 195, 0.38)',
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 14,
              color: '#fff',
            },
            data: processedData.map((item) => item.name),
          },
          yAxis: {
            // name: `单位：${response.data.unit1}`,
            nameTextStyle: {
              color: '#ffffff'
            },
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: 'rgba(182, 183, 195, 0.38)',
              },
            },
            axisLabel: {
              color: '#fff'
            },
          },
          series: [
            {
              type: 'bar',
              stack: '金额',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)',
                borderRadius: 30
              },
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0)',
                },
              },
              data: data2
            },
            {
              type: 'bar',
              stack: '金额',
              roundCap: true,
              barWidth: 37,
              label: {
                show: true,
                color: '#428ED3',
                fontWeight: 400,
                position: 'top'
              },
              itemStyle: {
                color: '#437AAC',
                borderRadius: 30
              },
              data: processedData.map((item) => item.value)
            },
          ],
        }
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 价格数据
    getPrice() {
      var self = this
      var myChart = this.$echarts.init(document.getElementById("price"));
      myChart.showLoading();
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '30'
        },
      }).then(function (response) {
        self.Pricelink = response.data.data2
        const processedData = Object.keys(response.data.data1).map((key) => {
          return {
            name: key,
            data: Object.entries(response.data.data1[key]).map(([date, price]) => {
              return { x: date, y: parseFloat(price) };
            })
          };
        });

        const colors = ['rgba(212, 130, 101, 0.3)', 'rgba(194, 53, 49, 0.3)', 'rgba(97, 160, 168, 0.3)']

        var chartOption = {
          tooltip: {
            trigger: "item",
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal'
            }
          },
          color: ['#D48265', '#A33936', '#61A0A8'],
          legend: {
            align: 'left',
            right: '30px',
            type: 'plain',
            itemHeight: 8,
            textStyle: {
              color: '#D7D8DE',
              fontSize: 12,
            },
            lineStyle: {
              width: 1
            }
          },
          grid: {
            top: '15%',
            left: '10%',
            right: '10%',
            bottom: '15%',
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
                type: 'solid'
              },
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                padding: 16,
                fontSize: 14
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#192a44'
              },
            },
            data: processedData[0].data.map(item => item.x)
          },
          yAxis: {
            // name: `单位：${response.data.unit1}`,
            nameTextStyle: {
              color: '#ffffff'
            },
            min: 700,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#666',
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#233653"
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                padding: 16,
                fontSize: 12
              }
            }
          },
          series: processedData.map((item, index) => ({
            name: item.name,
            type: 'line',
            symbolSize: 6,
            smooth: true,
            lineStyle: {
              normal: {
                width: 2,
              },
              borderColor: 'rgba(0,0,0,.4)',
            },
            itemStyle: {
              borderColor: colors[index],
              borderWidth: 3,
              shadowColor: colors[index],
              shadowBlur: 14
            },
            areaStyle: {
              color: colors[index]
            },
            tooltip: {
              show: true
            },
            data: item.data.map((item) => item.y)
          }))
        }
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 进出口数据
    getExports() {
      var self = this
      var myChart = this.$echarts.init(document.getElementById("continent"));
      myChart.showLoading();
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '29'
        },
      }).then(function (response) {
        self.exportsLink = response.data.data3
        self.commodityList = response.data.data2
        self.exportsunit = response.data.unit1
        self.exportsTime = response.data.time
        const processDataForRadarChart = (data) => {
          var radarData = []
          var categories = []
          var values = []
          var continentArray = [];
          for (var i = 0; i < data.length; i++) {
            var item = data[i]
            var key = Object.keys(item)[0]
            var subData = item[key]
            categories.push(key)
            var subValues = []
            for (var region in subData) {
              if (!continentArray.includes(region)) {
                continentArray.push(region);
              }
              subValues.push(parseFloat(subData[region]))
            }
            values.push(subValues);
          }
          radarData.push(categories)
          radarData.push(values)
          radarData.push(continentArray)
          return radarData
        }
        const [labels, values, regions] = processDataForRadarChart(response.data.data1);
        const indicator = regions.map((region) => ({
          name: region,
          max: null
        }))
        const colorlist = ['83, 147, 234', '245, 166, 35', '86,199,60']
        const seriesData = labels.map((items, index) => ({
          name: items,
          type: 'radar',
          symbol: "circle",
          symbolSize: 8,
          areaStyle: {
            normal: {
              color: `rgba(${colorlist[index]}, 0.5)`
            }
          },
          itemStyle: {
            color: `rgba(${colorlist[index]}, 0.2)`,
            borderColor: colorlist[index],
            // borderWidth: 10,
          },
          lineStyle: {
            normal: {
              type: "solid",
              color: `rgba(${colorlist[index]}, 1)`,
              width: 2
            }
          },
          data: [{ value: values[index], name: items }]
        }))
        var chartOption = {
          tooltip: {
            show: true,
            trigger: "item",
            valueFormatter: (value) => value
          },
          color: ['rgba(83, 147, 234, 1)', 'rgba(245, 166, 35, 1)', 'rgba(86,199,60, 1)'],
          legend: {
            show: true,
            icon: "circle",
            left: "35%",
            top: "90%",
            orient: "horizontal",
            textStyle: {
              fontSize: 14,
              color: "#fff"
            },
            data: regions
          },
          radar: {
            center: ["50%", "50%"],
            radius: "70%",
            "startAngle": 90,
            "splitNumber": 4,
            "shape": "circle",
            "splitArea": {
              "areaStyle": {
                "color": ["transparent"]
              }
            },
            axisLabel: {
              "show": false,
              "fontSize": 18,
              "color": "#fff",
              "fontStyle": "normal",
              "fontWeight": "normal"
            },
            axisName: {
              show: true,
              color: '#fff',
              fontSize: 14
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#666"
              }
            },
            splitLine: {
              "show": true,
              lineStyle: {
                color: "#666"
              }
            },
            indicator: indicator,
          },
          series: seriesData
        }
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 工业经济
    getindustry() {
      var self = this
      var myChart = this.$echarts.init(document.getElementById("yield"));
      myChart.showLoading();
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '28'
        },
      }).then(function (response) {
        self.industryLink = response.data.data3
        self.industryTime = response.data.time2
        const processedData = Object.entries(response.data.data2).map(([key, values]) => {
          return {
            name: key,
            type: 'line',
            symbol: 'circle',
            symbolSize: 10,
            lineStyle: {
              width: .4
            },
            smooth: true,
            data: Object.entries(values).map(([year, value]) => ({
              name: year, value: parseFloat(value)
            }))
          }
        })
        const years = Object.keys(response.data.data2).reduce((allYears, key) => {
          const yearsForKey = Object.keys(response.data.data2[key]);
          return [...allYears, ...yearsForKey];
        }, []);
        const uniqueYears = [...new Set(years)];
        var chartOption = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            icon: 'circle',
            textStyle: {
              color: '#fff',
              // fontSize: 14
            },
            data: Object.keys(response.data.data2),
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#fff'
            },
            data: uniqueYears,
          },
          yAxis: {
            // name: `单位:${response.data.unit1}`,
            splitNumber: 10,
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#666'
              }
            },
            type: 'value',
          },
          series: processedData,
        }
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
        self.getfinance(response.data.data1)
      }).catch(function (error) {
        console.error(error)
      });
    },
    getfinance(data) {
      var myChart = this.$echarts.init(document.getElementById("finance"));
      myChart.showLoading();
      const processedData = data.map((item, index) => {
        return {
          name: Object.keys(item)[0],
          value: parseFloat(Object.values(item)[0])
        }
      })
      const look = [1400000, 1232000, 1064000, 896000, 728000, 560000, 392000, 224000]
      const endprocessedData = processedData.map((item, index) => {
        return {
          name: item.name,
          value: look[index]
        }
      })
      var chartOption = {
        color: ['#8856A0', '#DB754C', '#368E68', '#66A8C3', '#CF5B5D', '#4C64AF', '#80B26A', '#D9AE51'],
        series: [
          {
            type: 'funnel',
            name: '资产总计',
            top: '10%',
            left: '15%',
            width: '70%',
            height: '80%',
            label: {
              color: '#fff',
              position: 'inside',
              formatter: '{b} {c}',
              fontSize: 13,
              borderWidth: 0,
              borderColor: 'transparent',
              backgroundColor: 'transparent',
              emphasis: {
                show: false,
              }
            },
            data: processedData
          },
          {
            type: 'funnel',
            name: '预期',
            top: '10%',
            left: '10%',
            width: '80%',
            height: '80%',
            label: {
              normal: {
                show: false,
                formatter: '{b}',
                fontSize: 13,
                borderWidth: 0,
                borderColor: 'transparent',
                backgroundColor: 'transparent'
              },
              emphasis: {
                show: false,
                formatter: '{b}'
              }
            },
            itemStyle: {
              opacity: 0.5,
            },
            data: endprocessedData
          }
        ]
      }
      myChart.hideLoading();
      myChart.setOption(chartOption, true);
    },
    // 宏观经济
    getMacro() {
      var myChart = this.$echarts.init(document.getElementById("quarterBar"));
      myChart.showLoading();
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '26'
        },
      }).then(function (response) {
        self.Macrolink = response.data.data2
        const gdpData = [];
        const colors = ['#C23531', '#61A0A8', '#D48265', '#3DA6D9']
        for (const year in response.data.data1['全国季度GDP']) {
          const quarters = response.data.data1['全国季度GDP'][year];
          for (const quarter in quarters) {
            gdpData.push({
              year: quarter,
              value: parseFloat(quarters[quarter])
            });
          }
        }
        gdpData.sort((a, b) => {
          if (a.year < b.year) return 1;
          if (a.year > b.year) return -1;
          return 0;
        });
        var chartOption = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          dataset: {
            source: gdpData
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: gdpData.map((item) => item.year),
            // source: 'quarter',
            axisLabel: {
              color: '#fff'
            }
          },
          yAxis: {
            // name: '单位：亿元',
            type: 'value',
            nameTextStyle: {
              color: '#fff'
            },
            axisLabel: {
              color: '#fff'
            },
            splitLine: {
              lineStyle: {
                color: '#666'
              }
            }
          },
          series: [{
            type: 'bar',
            barWidth: '60%',
            data: gdpData.map((item, index) => ({
              value: item.value,
              itemStyle: {
                color: colors[index]
              }
            }))
          }]
        }
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
        self.getQuarter(response.data.data1['经济学家信心指数'])
      }).catch(function (error) {
        console.error(error)
      });
    },
    getQuarter(data) {
      const entries = Object.entries(data);
      const [currentYear, quarters] = entries[0];
      const currentValue = quarters[Object.keys(quarters)[0]];
      this.quarter = currentValue
      var myChart = this.$echarts.init(document.getElementById("quarter"));
      myChart.showLoading();
      var self = this
      var chartOption = {
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 220,
            endAngle: -40,
            axisLine: {
              lineStyle: {
                color: [
                  [1, '#1B2B37'],
                ],
                width: 20
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            detail: {
              show: false,
              offsetCenter: [0, '60%'],
              textStyle: {
                fontSize: 32,
                color: '#fff'
              }
            },
          },
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 220,
            endAngle: -45,
            min: 0,
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                width: 20,
                color: [
                  [
                    currentValue / 100, new self.$echarts.graphic.LinearGradient(
                      0, 1, 1, 0, [{
                        offset: 0,
                        color: 'rgba(58, 70, 130, 1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(63, 85, 170, 1)',
                      }
                    ]
                    )
                  ],
                  [
                    1, 'rgba(255,255,255,.0)'
                  ]
                ]
              }
            },
            axisTick: {
              show: 0,
            },
            splitLine: {
              show: 0,
            },
            axisLabel: {
              show: 0
            },
            pointer: {
              show: false,
            },
            detail: {
              show: true,
              offsetCenter: [0, 0],
              textStyle: {
                fontSize: 32,
                color: '#ffffff',
                fontWeight: 400,
                textBorderWidth: 10
              },
              formatter: function () {
                return currentValue;
              }
            },
            data: [{
              value: currentValue
            }]
          },
          {
            name: '最外刻度箭头',
            type: 'gauge',
            radius: '100%',
            center: ['50%', '50%'],
            startAngle: 175 - (260 * currentValue) / 100 + 41,
            endAngle: 175 - (260 * currentValue) / 100 - 40,
            splitNumber: 10,
            min: 0,
            max: 100,
            axisLine: {
              lineStyle: {
                color: [
                  [3 / 220, 'rgba(63, 85, 170, 1)'],
                ],
                width: 30,
                shadowColor: 'rgba(63, 85, 170, 1)',
                shadowBlur: 10,
              },
            },
            progress: {
              show: false,
              width: 29,
              itemStyle: {
                color: '#10EBE3',
                shadowColor: 'rgba(63, 85, 170, 1)',
                shadowBlur: 10,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
            animationDelay: 850,
            animationDuration: 300
          }
        ]
      }
      myChart.hideLoading();
      myChart.setOption(chartOption, true);
    },
    // 热数
    getHeat() {
      var self = this;
      var myChart = this.$echarts.init(document.getElementById("heat"));
      myChart.showLoading();
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '25'
        },
      }).then(function (response) {
        var chartOption = {
          tooltip: {
            show: true,
            borderColor: '#fe9a8bb3',
            borderWidth: 1,
            padding: [10, 15, 10, 15],
            confine: true,
            backgroundColor: 'rgba(255, 255, 255, .9)',
            textStyle: {
              color: 'hotpink',
              lineHeight: 22
            },
            extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'
          },
          series: [
            {
              type: 'wordCloud',
              shape: 'pentagon',
              left: 'center',
              top: 'center',
              width: '90%',
              height: '100%',
              right: null,
              bottom: null,
              sizeRange: [20, 70],
              rotationRange: [0, 0],
              rotationStep: 0,
              gridSize: 30,
              drawOutOfBound: false,
              layoutAnimation: true,
              textStyle: {
                fontFamily: 'PingFangSC-Semibold',
                fontWeight: 600,
                color: function () {
                  return 'rgb(' + [
                    Math.round(Math.random() * 200 + 55),
                    Math.round(Math.random() * 200 + 55),
                    Math.round(Math.random() * 200 + 55)
                  ].join(',') + ')';
                }
              },
              emphasis: {
                focus: 'none',
              },
              data: response.data.map((item) => {
                return { name: item.hotWord, value: item.hotWordCount }
              })
            }
          ]
        };
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {

      });
    },
    // 关系图数据
    getrelation() {
      var myChart = this.$echarts.init(document.getElementById("relation"));
      var graph = {
        "nodes": [
          {
            "id": "0",
            "name": "温州中油冶金加油站有限公司",
            "symbolSize": 19.12381,
            "x": -266.82776,
            "y": 299.6904,
            "value": 28.685715,
            "category": 0
          },
          {
            "id": "1",
            "name": "重庆石油天然气交易中心",
            "symbolSize": 2.6666666666666665,
            "x": -418.08344,
            "y": 446.8853,
            "value": 4,
            "category": 0
          },
          {
            "id": "2",
            "name": "石家庄绿能速电科技有限公司",
            "symbolSize": 6.323809333333333,
            "x": -212.76357,
            "y": 245.29176,
            "value": 9.485714,
            "category": 1
          },
          {
            "id": "3",
            "name": "上海爱使东方气站有限公司",
            "symbolSize": 6.323809333333333,
            "x": -242.82404,
            "y": 235.26283,
            "value": 9.485714,
            "category": 1
          },
          {
            "id": "4",
            "name": "华北油田新能源有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -379.30386,
            "y": 429.06424,
            "value": 4,
            "category": 0
          },
          {
            "id": "5",
            "name": "中山市中油同益加油站有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -417.26337,
            "y": 406.03506,
            "value": 4,
            "category": 0
          },
          {
            "id": "6",
            "name": "中石油克拉码依石化有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -332.6012,
            "y": 485.16974,
            "value": 4,
            "category": 0
          },
          {
            "id": "7",
            "name": "重庆石油天然气交易中心",
            "symbolSize": 2.6666666666666665,
            "x": -382.69568,
            "y": 475.09113,
            "value": 4,
            "category": 0
          },
          {
            "id": "8",
            "name": "厦门市杏林中油油品供应有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -320.384,
            "y": 387.17325,
            "value": 4,
            "category": 0
          },
          {
            "id": "9",
            "name": "重庆油山荣石油有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -344.39832,
            "y": 451.16772,
            "value": 4,
            "category": 0
          },
          {
            "id": "10",
            "name": "北京中油首路石油销售有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -89.34107,
            "y": 234.56128,
            "value": 4,
            "category": 1
          },
          {
            "id": "11",
            "name": "中国石油天然气股份有限公司",
            "symbolSize": 66.66666666666667,
            "x": -87.93029,
            "y": -6.8120565,
            "value": 100,
            "category": 1
          },
          {
            "id": "12",
            "name": "北京中油华电石油销售有限公司",
            "symbolSize": 4.495239333333333,
            "x": -339.77908,
            "y": -184.69139,
            "value": 6.742859,
            "category": 1
          },
          {
            "id": "13",
            "name": "乐山市川沐销能源有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -194.31313,
            "y": 178.55301,
            "value": 4,
            "category": 1
          },
          {
            "id": "14",
            "name": "中国供销石油有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -158.05168,
            "y": 201.99768,
            "value": 4,
            "category": 1
          },
          {
            "id": "15",
            "name": "重庆中油正南能源销售有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -127.701546,
            "y": 242.55057,
            "value": 4,
            "category": 1
          },
          {
            "id": "16",
            "name": "成都生物城中油能源有限公司",
            "symbolSize": 17.295237333333333,
            "x": -385.2226,
            "y": -393.5572,
            "value": 25.942856,
            "category": 2
          },
          {
            "id": "17",
            "name": "上海东新加油站有限公司",
            "symbolSize": 13.638097333333334,
            "x": -516.55884,
            "y": -393.98975,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "18",
            "name": "梅州市梅县区江灵中油油……",
            "symbolSize": 13.638097333333334,
            "x": -464.79382,
            "y": -493.57944,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "19",
            "name": "陕西氢能昆仑能源发展有限公司",
            "symbolSize": 13.638097333333334,
            "x": -515.1624,
            "y": -456.9891,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "20",
            "name": "中油曹妃甸石油销售有限公司",
            "symbolSize": 13.638097333333334,
            "x": -408.12122,
            "y": -464.5048,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "21",
            "name": "浙油(山东)新能源有限公司",
            "symbolSize": 13.638097333333334,
            "x": -456.44113,
            "y": -425.13303,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "22",
            "name": "河南中油视博科技有限责任公司",
            "symbolSize": 13.638097333333334,
            "x": -459.1107,
            "y": -362.5133,
            "value": 20.457146,
            "category": 2
          },
          {
            "id": "23",
            "name": "中油中船(北京)石油销...",
            "symbolSize": 28.266666666666666,
            "x": -313.42786,
            "y": -289.44803,
            "value": 42.4,
            "category": 2
          },
          {
            "id": "24",
            "name": "四川中运宝信息技术有限公司",
            "symbolSize": 20.95238266666667,
            "x": 4.6313396,
            "y": -273.8517,
            "value": 31.428574,
            "category": 7
          },
          {
            "id": "25",
            "name": "广东瑞斯拜德汽车服务有限公司",
            "symbolSize": 30.095235333333335,
            "x": 82.80825,
            "y": -203.1144,
            "value": 45.142853,
            "category": 7
          },
          {
            "id": "26",
            "name": "宁波中油凤岭加油站有限公司",
            "symbolSize": 20.95238266666667,
            "x": 78.64646,
            "y": -31.512747,
            "value": 31.428574,
            "category": 6
          },
          {
            "id": "27",
            "name": "扬州中油石油销售有限公司...",
            "symbolSize": 31.923806666666668,
            "x": -81.46074,
            "y": -204.20204,
            "value": 47.88571,
            "category": 7
          },
          {
            "id": "28",
            "name": "上饶市广丰区广隆石油有限公司",
            "symbolSize": 8.152382000000001,
            "x": -225.73984,
            "y": 82.41631,
            "value": 12.228573,
            "category": 4
          },
          {
            "id": "29",
            "name": "益阳团山商贸有限公司",
            "symbolSize": 15.466666666666667,
            "x": -385.6842,
            "y": -20.206686,
            "value": 23.2,
            "category": 3
          },
          {
            "id": "30",
            "name": "乐山峨沙天然气有限责任公司",
            "symbolSize": 4.495239333333333,
            "x": -403.92447,
            "y": -197.69823,
            "value": 6.742859,
            "category": 2
          },
          {
            "id": "31",
            "name": "宁夏中油能源科技有限责公司",
            "symbolSize": 8.152382000000001,
            "x": -281.4253,
            "y": -158.45137,
            "value": 12.228573,
            "category": 2
          },
          {
            "id": "32",
            "name": "广西铜州石油有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -122.41348,
            "y": 210.37503,
            "value": 4,
            "category": 1
          },
          {
            "id": "33",
            "name": "保定中油石油销售有限公司",
            "symbolSize": 4.495239333333333,
            "x": -234.6001,
            "y": -113.15067,
            "value": 6.742859,
            "category": 1
          },
          {
            "id": "34",
            "name": "上海中油临港石油有限公司",
            "symbolSize": 11.809524666666666,
            "x": -387.84915,
            "y": 58.7059,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "35",
            "name": "新疆塔里木油田建设工程...",
            "symbolSize": 11.809524666666666,
            "x": -338.2307,
            "y": 87.48405,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "36",
            "name": "象山城东加油站有限公司",
            "symbolSize": 11.809524666666666,
            "x": -453.26874,
            "y": 58.94648,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "37",
            "name": "沈阳中油永安能源发展有...",
            "symbolSize": 11.809524666666666,
            "x": -386.44904,
            "y": 140.05937,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "38",
            "name": "玉环中环岛北路加油站...",
            "symbolSize": 11.809524666666666,
            "x": -446.7876,
            "y": 123.38005,
            "value": 17.714287,
            "category": 3
          },
          {
            "id": "39",
            "name": "临夏州盛河润泽石油销售...",
            "symbolSize": 6.323809333333333,
            "x": 336.49738,
            "y": -269.55914,
            "value": 9.485714,
            "category": 6
          },
          {
            "id": "40",
            "name": "常山中油振钏加油站有限...",
            "symbolSize": 2.6666666666666665,
            "x": 29.187843,
            "y": -460.13132,
            "value": 4,
            "category": 7
          },
          {
            "id": "41",
            "name": "中山市中油柏山加油站有限...",
            "symbolSize": 20.95238266666667,
            "x": 238.36697,
            "y": -210.00926,
            "value": 31.428574,
            "category": 7
          },
          {
            "id": "42",
            "name": "天津中油红桥石油销售有...",
            "symbolSize": 6.323809333333333,
            "x": 189.69513,
            "y": -346.50662,
            "value": 9.485714,
            "category": 7
          },
          {
            "id": "43",
            "name": "遂宁新顺中油能源发展有...",
            "symbolSize": 6.323809333333333,
            "x": -187.00418,
            "y": -145.02663,
            "value": 9.485714,
            "category": 6
          },
          {
            "id": "44",
            "name": "南京中油三桥成品油销售",
            "symbolSize": 4.495239333333333,
            "x": -252.99521,
            "y": 129.87549,
            "value": 6.742859,
            "category": 4
          },
          {
            "id": "45",
            "name": "常州化诚油品有限公司",
            "symbolSize": 2.6666666666666665,
            "x": -296.07935,
            "y": 163.11964,
            "value": 4,
            "category": 4
          },
          {
            "id": "46",
            "name": "山东通达中油新能源有限公司",
            "symbolSize": 2.6666666666666665,
            "x": 550.3201,
            "y": 522.4031,
            "value": 4,
            "category": 5
          },
          {
            "id": "47",
            "name": "中石化中牟第二十一加油",
            "symbolSize": 4.495239333333333,
            "x": 488.13535,
            "y": 356.8573,
            "value": 6.742859,
            "category": 5
          },
          {
            "id": "48",
            "name": "中石油中牟第二加油站",
            "symbolSize": 41.06667066666667,
            "x": 387.89572,
            "y": 110.462326,
            "value": 61.600006,
            "category": 8
          },
          {
            "id": "49",
            "name": "中石化中牟服务区加油站",
            "symbolSize": 13.638097333333334,
            "x": 126.4831,
            "y": 68.10622,
            "value": 20.457146,
            "category": 6
          },
          {
            "id": "50",
            "name": "中石油河南中牟第十一加",
            "symbolSize": 4.495239333333333,
            "x": 127.07365,
            "y": -113.05923,
            "value": 6.742859,
            "category": 6
          },
          {
            "id": "51",
            "name": "中石化中牟第三加油站",
            "symbolSize": 13.638097333333334,
            "x": 162.63559,
            "y": 117.6565,
            "value": 20.457146,
            "category": 6
          },
          {
            "id": "52",
            "name": "中石化商都大道有限公司",
            "symbolSize": 4.495239333333333,
            "x": 353.66415,
            "y": -205.89165,
            "value": 6.742859,
            "category": 6
          },
          {
            "id": "53",
            "name": "中石油民主街村有限公司",
            "symbolSize": 2.6666666666666665,
            "x": 165.43939,
            "y": 339.7736,
            "value": 4,
            "category": 6
          },
          {
            "id": "54",
            "name": "中石油中牟第四有限公司",
            "symbolSize": 8.152382000000001,
            "x": 137.69348,
            "y": 196.1069,
            "value": 12.228573,
            "category": 6
          },
          {
            "id": "55",
            "name": "道达尔北关加油站",
            "symbolSize": 35.58095333333333,
            "x": 206.44687,
            "y": -13.805411,
            "value": 53.37143,
            "category": 6
          },
          {
            "id": "56",
            "name": "道达尔北沙滩有限公司",
            "symbolSize": 4.495239333333333,
            "x": 194.82993,
            "y": 224.78036,
            "value": 6.742859,
            "category": 6
          },
          {
            "id": "57",
            "name": "道达尔金顶街加油站",
            "symbolSize": 20.95238266666667,
            "x": 597.6618,
            "y": 135.18481,
            "value": 31.428574,
            "category": 8
          },
          {
            "id": "58",
            "name": "中石油云台有限公司",
            "symbolSize": 28.266666666666666,
            "x": 355.78366,
            "y": -74.882454,
            "value": 42.4,
            "category": 8
          },
          {
            "id": "59",
            "name": "道达尔西红门有限公司",
            "symbolSize": 20.95238266666667,
            "x": 515.2961,
            "y": -46.167564,
            "value": 31.428574,
            "category": 8
          },
          {
            "id": "60",
            "name": "道达尔姚家园有限公司",
            "symbolSize": 17.295237333333333,
            "x": 614.29285,
            "y": -69.3104,
            "value": 25.942856,
            "category": 8
          },
          {
            "id": "61",
            "name": "道达尔祁连路有限公司",
            "symbolSize": 20.95238266666667,
            "x": 550.1917,
            "y": -128.17537,
            "value": 31.428574,
            "category": 8
          },
          {
            "id": "62",
            "name": "道达尔马家店镇人民政府南",
            "symbolSize": 24.609526666666667,
            "x": 436.17184,
            "y": -12.7286825,
            "value": 36.91429,
            "category": 8
          },
          {
            "id": "63",
            "name": "中石油振国有限公司",
            "symbolSize": 22.780953333333333,
            "x": 602.55225,
            "y": 16.421427,
            "value": 34.17143,
            "category": 8
          },
          {
            "id": "64",
            "name": "中石油振东有限公司",
            "symbolSize": 24.609526666666667,
            "x": 455.81955,
            "y": -115.45826,
            "value": 36.91429,
            "category": 8
          },
          {
            "id": "65",
            "name": "中石油云杉有限公司",
            "symbolSize": 22.780953333333333,
            "x": 516.40784,
            "y": 47.242233,
            "value": 34.17143,
            "category": 8
          },
          {
            "id": "66",
            "name": "山东路兴石油油气销售有限公司",
            "symbolSize": 19.12381,
            "x": 646.4313,
            "y": -151.06331,
            "value": 28.685715,
            "category": 8
          },
          {
            "id": "67",
            "name": "盘锦科力安石油科技有限公司",
            "symbolSize": 2.6666666666666665,
            "x": 668.9568,
            "y": 204.65488,
            "value": 4,
            "category": 8
          },
          {
            "id": "68",
            "name": "上海金三角加油站有限公司",
            "symbolSize": 19.12381,
            "x": 78.4799,
            "y": -347.15146,
            "value": 28.685715,
            "category": 7
          },
          {
            "id": "69",
            "name": "新疆中油国能油品销售有...",
            "symbolSize": 19.12381,
            "x": 150.35959,
            "y": -298.50797,
            "value": 28.685715,
            "category": 7
          },
          {
            "id": "70",
            "name": "深圳市石化先进加油站有...",
            "symbolSize": 19.12381,
            "x": 137.3717,
            "y": -410.2809,
            "value": 28.685715,
            "category": 7
          },
          {
            "id": "71",
            "name": "厦门福丽工贸有限公司",
            "symbolSize": 17.295237333333333,
            "x": 234.87747,
            "y": -400.85983,
            "value": 25.942856,
            "category": 7
          },
          {
            "id": "72",
            "name": "上海中油爱使华浦加气站..",
            "symbolSize": 6.323809333333333,
            "x": 40.942253,
            "y": 113.78272,
            "value": 9.485714,
            "category": 1
          },
          {
            "id": "73",
            "name": "中石油遂宁天然气净化有...",
            "symbolSize": 4.495239333333333,
            "x": 437.939,
            "y": 291.58234,
            "value": 6.742859,
            "category": 8
          },
          {
            "id": "74",
            "name": "江西中油铁衡有限公司",
            "symbolSize": 4.495239333333333,
            "x": 466.04922,
            "y": 283.3606,
            "value": 6.742859,
            "category": 8
          },
          {
            "id": "75",
            "name": "天津中油红桥石油销售有...",
            "symbolSize": 13.638097333333334,
            "x": 238.79364,
            "y": -314.06345,
            "value": 20.457146,
            "category": 7
          },
          {
            "id": "76",
            "name": "遂宁新顺中油能源发展有...",
            "symbolSize": 13.638097333333334,
            "x": 712.18353,
            "y": 4.8131495,
            "value": 20.457146,
            "category": 8
          }
        ],
        "links": [
          {
            "source": "1",
            "target": "0"
          },
          {
            "source": "2",
            "target": "0"
          },
          {
            "source": "3",
            "target": "0"
          },
          {
            "source": "3",
            "target": "2"
          },
          {
            "source": "4",
            "target": "0"
          },
          {
            "source": "5",
            "target": "0"
          },
          {
            "source": "6",
            "target": "0"
          },
          {
            "source": "7",
            "target": "0"
          },
          {
            "source": "8",
            "target": "0"
          },
          {
            "source": "9",
            "target": "0"
          },
          {
            "source": "11",
            "target": "0"
          },
          {
            "source": "11",
            "target": "2"
          },
          {
            "source": "11",
            "target": "3"
          },
          {
            "source": "11",
            "target": "10"
          },
          {
            "source": "12",
            "target": "11"
          },
          {
            "source": "13",
            "target": "11"
          },
          {
            "source": "14",
            "target": "11"
          },
          {
            "source": "15",
            "target": "11"
          },
          {
            "source": "17",
            "target": "16"
          },
          {
            "source": "18",
            "target": "16"
          },
          {
            "source": "18",
            "target": "17"
          },
          {
            "source": "19",
            "target": "16"
          },
          {
            "source": "19",
            "target": "17"
          },
          {
            "source": "19",
            "target": "18"
          },
          {
            "source": "20",
            "target": "16"
          },
          {
            "source": "20",
            "target": "17"
          },
          {
            "source": "20",
            "target": "18"
          },
          {
            "source": "20",
            "target": "19"
          },
          {
            "source": "21",
            "target": "16"
          },
          {
            "source": "21",
            "target": "17"
          },
          {
            "source": "21",
            "target": "18"
          },
          {
            "source": "21",
            "target": "19"
          },
          {
            "source": "21",
            "target": "20"
          },
          {
            "source": "22",
            "target": "16"
          },
          {
            "source": "22",
            "target": "17"
          },
          {
            "source": "22",
            "target": "18"
          },
          {
            "source": "22",
            "target": "19"
          },
          {
            "source": "22",
            "target": "20"
          },
          {
            "source": "22",
            "target": "21"
          },
          {
            "source": "23",
            "target": "11"
          },
          {
            "source": "23",
            "target": "12"
          },
          {
            "source": "23",
            "target": "16"
          },
          {
            "source": "23",
            "target": "17"
          },
          {
            "source": "23",
            "target": "18"
          },
          {
            "source": "23",
            "target": "19"
          },
          {
            "source": "23",
            "target": "20"
          },
          {
            "source": "23",
            "target": "21"
          },
          {
            "source": "23",
            "target": "22"
          },
          {
            "source": "24",
            "target": "11"
          },
          {
            "source": "24",
            "target": "23"
          },
          {
            "source": "25",
            "target": "11"
          },
          {
            "source": "25",
            "target": "23"
          },
          {
            "source": "25",
            "target": "24"
          },
          {
            "source": "26",
            "target": "11"
          },
          {
            "source": "26",
            "target": "16"
          },
          {
            "source": "26",
            "target": "24"
          },
          {
            "source": "26",
            "target": "25"
          },
          {
            "source": "27",
            "target": "11"
          },
          {
            "source": "27",
            "target": "23"
          },
          {
            "source": "27",
            "target": "24"
          },
          {
            "source": "27",
            "target": "25"
          },
          {
            "source": "27",
            "target": "26"
          },
          {
            "source": "28",
            "target": "11"
          },
          {
            "source": "28",
            "target": "27"
          },
          {
            "source": "29",
            "target": "11"
          },
          {
            "source": "29",
            "target": "23"
          },
          {
            "source": "29",
            "target": "27"
          },
          {
            "source": "30",
            "target": "23"
          },
          {
            "source": "31",
            "target": "11"
          },
          {
            "source": "31",
            "target": "23"
          },
          {
            "source": "31",
            "target": "27"
          },
          {
            "source": "31",
            "target": "30"
          },
          {
            "source": "32",
            "target": "11"
          },
          {
            "source": "33",
            "target": "11"
          },
          {
            "source": "33",
            "target": "27"
          },
          {
            "source": "34",
            "target": "11"
          },
          {
            "source": "34",
            "target": "29"
          },
          {
            "source": "35",
            "target": "11"
          },
          {
            "source": "35",
            "target": "29"
          },
          {
            "source": "35",
            "target": "34"
          },
          {
            "source": "36",
            "target": "11"
          },
          {
            "source": "36",
            "target": "29"
          },
          {
            "source": "36",
            "target": "34"
          },
          {
            "source": "36",
            "target": "35"
          },
          {
            "source": "37",
            "target": "11"
          },
          {
            "source": "37",
            "target": "29"
          },
          {
            "source": "37",
            "target": "34"
          },
          {
            "source": "37",
            "target": "35"
          },
          {
            "source": "37",
            "target": "36"
          },
          {
            "source": "38",
            "target": "11"
          },
          {
            "source": "38",
            "target": "29"
          },
          {
            "source": "38",
            "target": "34"
          },
          {
            "source": "38",
            "target": "35"
          },
          {
            "source": "38",
            "target": "36"
          },
          {
            "source": "38",
            "target": "37"
          },
          {
            "source": "39",
            "target": "25"
          },
          {
            "source": "40",
            "target": "25"
          },
          {
            "source": "41",
            "target": "24"
          },
          {
            "source": "41",
            "target": "25"
          },
          {
            "source": "42",
            "target": "24"
          },
          {
            "source": "42",
            "target": "25"
          },
          {
            "source": "42",
            "target": "41"
          },
          {
            "source": "43",
            "target": "11"
          },
          {
            "source": "43",
            "target": "26"
          },
          {
            "source": "43",
            "target": "27"
          },
          {
            "source": "44",
            "target": "11"
          },
          {
            "source": "44",
            "target": "28"
          },
          {
            "source": "45",
            "target": "28"
          },
          {
            "source": "47",
            "target": "46"
          },
          {
            "source": "48",
            "target": "11"
          },
          {
            "source": "48",
            "target": "25"
          },
          {
            "source": "48",
            "target": "27"
          },
          {
            "source": "48",
            "target": "47"
          },
          {
            "source": "49",
            "target": "11"
          },
          {
            "source": "49",
            "target": "26"
          },
          {
            "source": "50",
            "target": "24"
          },
          {
            "source": "50",
            "target": "49"
          },
          {
            "source": "51",
            "target": "11"
          },
          {
            "source": "51",
            "target": "26"
          },
          {
            "source": "51",
            "target": "49"
          },
          {
            "source": "52",
            "target": "39"
          },
          {
            "source": "52",
            "target": "51"
          },
          {
            "source": "53",
            "target": "51"
          },
          {
            "source": "54",
            "target": "26"
          },
          {
            "source": "54",
            "target": "49"
          },
          {
            "source": "54",
            "target": "51"
          },
          {
            "source": "55",
            "target": "11"
          },
          {
            "source": "55",
            "target": "16"
          },
          {
            "source": "55",
            "target": "25"
          },
          {
            "source": "55",
            "target": "26"
          },
          {
            "source": "55",
            "target": "39"
          },
          {
            "source": "55",
            "target": "41"
          },
          {
            "source": "55",
            "target": "48"
          },
          {
            "source": "55",
            "target": "49"
          },
          {
            "source": "55",
            "target": "51"
          },
          {
            "source": "55",
            "target": "54"
          },
          {
            "source": "56",
            "target": "49"
          },
          {
            "source": "56",
            "target": "55"
          },
          {
            "source": "57",
            "target": "41"
          },
          {
            "source": "57",
            "target": "48"
          },
          {
            "source": "57",
            "target": "55"
          },
          {
            "source": "58",
            "target": "11"
          },
          {
            "source": "58",
            "target": "27"
          },
          {
            "source": "58",
            "target": "48"
          },
          {
            "source": "58",
            "target": "55"
          },
          {
            "source": "58",
            "target": "57"
          },
          {
            "source": "59",
            "target": "48"
          },
          {
            "source": "59",
            "target": "55"
          },
          {
            "source": "59",
            "target": "57"
          },
          {
            "source": "59",
            "target": "58"
          },
          {
            "source": "60",
            "target": "48"
          },
          {
            "source": "60",
            "target": "58"
          },
          {
            "source": "60",
            "target": "59"
          },
          {
            "source": "61",
            "target": "48"
          },
          {
            "source": "61",
            "target": "55"
          },
          {
            "source": "61",
            "target": "57"
          },
          {
            "source": "61",
            "target": "58"
          },
          {
            "source": "61",
            "target": "59"
          },
          {
            "source": "61",
            "target": "60"
          },
          {
            "source": "62",
            "target": "41"
          },
          {
            "source": "62",
            "target": "48"
          },
          {
            "source": "62",
            "target": "55"
          },
          {
            "source": "62",
            "target": "57"
          },
          {
            "source": "62",
            "target": "58"
          },
          {
            "source": "62",
            "target": "59"
          },
          {
            "source": "62",
            "target": "60"
          },
          {
            "source": "62",
            "target": "61"
          },
          {
            "source": "63",
            "target": "48"
          },
          {
            "source": "63",
            "target": "55"
          },
          {
            "source": "63",
            "target": "57"
          },
          {
            "source": "63",
            "target": "58"
          },
          {
            "source": "63",
            "target": "59"
          },
          {
            "source": "63",
            "target": "60"
          },
          {
            "source": "63",
            "target": "61"
          },
          {
            "source": "63",
            "target": "62"
          },
          {
            "source": "64",
            "target": "11"
          },
          {
            "source": "64",
            "target": "48"
          },
          {
            "source": "64",
            "target": "55"
          },
          {
            "source": "64",
            "target": "57"
          },
          {
            "source": "64",
            "target": "58"
          },
          {
            "source": "64",
            "target": "59"
          },
          {
            "source": "64",
            "target": "60"
          },
          {
            "source": "64",
            "target": "61"
          },
          {
            "source": "64",
            "target": "62"
          },
          {
            "source": "64",
            "target": "63"
          },
          {
            "source": "65",
            "target": "48"
          },
          {
            "source": "65",
            "target": "55"
          },
          {
            "source": "65",
            "target": "57"
          },
          {
            "source": "65",
            "target": "58"
          },
          {
            "source": "65",
            "target": "59"
          },
          {
            "source": "65",
            "target": "60"
          },
          {
            "source": "65",
            "target": "61"
          },
          {
            "source": "65",
            "target": "62"
          },
          {
            "source": "65",
            "target": "63"
          },
          {
            "source": "65",
            "target": "64"
          },
          {
            "source": "66",
            "target": "48"
          },
          {
            "source": "66",
            "target": "58"
          },
          {
            "source": "66",
            "target": "59"
          },
          {
            "source": "66",
            "target": "60"
          },
          {
            "source": "66",
            "target": "61"
          },
          {
            "source": "66",
            "target": "62"
          },
          {
            "source": "66",
            "target": "63"
          },
          {
            "source": "66",
            "target": "64"
          },
          {
            "source": "66",
            "target": "65"
          },
          {
            "source": "67",
            "target": "57"
          },
          {
            "source": "68",
            "target": "11"
          },
          {
            "source": "68",
            "target": "24"
          },
          {
            "source": "68",
            "target": "25"
          },
          {
            "source": "68",
            "target": "27"
          },
          {
            "source": "68",
            "target": "41"
          },
          {
            "source": "68",
            "target": "48"
          },
          {
            "source": "69",
            "target": "11"
          },
          {
            "source": "69",
            "target": "24"
          },
          {
            "source": "69",
            "target": "25"
          },
          {
            "source": "69",
            "target": "27"
          },
          {
            "source": "69",
            "target": "41"
          },
          {
            "source": "69",
            "target": "48"
          },
          {
            "source": "69",
            "target": "68"
          },
          {
            "source": "70",
            "target": "11"
          },
          {
            "source": "70",
            "target": "24"
          },
          {
            "source": "70",
            "target": "25"
          },
          {
            "source": "70",
            "target": "27"
          },
          {
            "source": "70",
            "target": "41"
          },
          {
            "source": "70",
            "target": "58"
          },
          {
            "source": "70",
            "target": "68"
          },
          {
            "source": "70",
            "target": "69"
          },
          {
            "source": "71",
            "target": "11"
          },
          {
            "source": "71",
            "target": "25"
          },
          {
            "source": "71",
            "target": "27"
          },
          {
            "source": "71",
            "target": "41"
          },
          {
            "source": "71",
            "target": "48"
          },
          {
            "source": "71",
            "target": "68"
          },
          {
            "source": "71",
            "target": "69"
          },
          {
            "source": "71",
            "target": "70"
          },
          {
            "source": "72",
            "target": "11"
          },
          {
            "source": "72",
            "target": "26"
          },
          {
            "source": "72",
            "target": "27"
          },
          {
            "source": "73",
            "target": "48"
          },
          {
            "source": "74",
            "target": "48"
          },
          {
            "source": "74",
            "target": "73"
          },
          {
            "source": "75",
            "target": "25"
          },
          {
            "source": "75",
            "target": "41"
          },
          {
            "source": "75",
            "target": "48"
          },
          {
            "source": "75",
            "target": "68"
          },
          {
            "source": "75",
            "target": "69"
          },
          {
            "source": "75",
            "target": "70"
          },
          {
            "source": "75",
            "target": "71"
          },
          {
            "source": "76",
            "target": "48"
          },
          {
            "source": "76",
            "target": "58"
          },
          {
            "source": "76",
            "target": "62"
          },
          {
            "source": "76",
            "target": "63"
          },
          {
            "source": "76",
            "target": "64"
          },
          {
            "source": "76",
            "target": "65"
          },
          {
            "source": "76",
            "target": "66"
          }
        ],
        "categories": [
          {
            "name": "A"
          },
          {
            "name": "B"
          },
          {
            "name": "C"
          },
          {
            "name": "D"
          },
          {
            "name": "E"
          },
          {
            "name": "F"
          },
          {
            "name": "G"
          },
          {
            "name": "H"
          },
          {
            "name": "I"
          }
        ]
      }
      myChart.showLoading();
      var chartOption = {
        tooltip: {
          formatter: '{b}'
        },
        grid: {
          top: '2%'
        },
        color: ['#9A60B4', '#F78452', '#EA7CCC', '#FAC858', '#EE6665', '#5470C6', '#91CC75'],
        series: [
          {
            type: 'graph',
            layout: 'none',
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: false,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#fff'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            }
          }
        ]
      };
      myChart.hideLoading();
      myChart.setOption(chartOption, true);
    },
    // 公司数据
    getAnnular() {
      var myChart = this.$echarts.init(document.getElementById("Annular"));
      myChart.showLoading();
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '24'
        },
      }).then(function (response) {
        // const AnnularData = response.data.data1
        const AnnularData = [
          { name: '公司数', data: 5000 },
          { name: '专利数', data: 4492 },
          { name: '商标数', data: 7429 },
          { name: '软著数', data: 1066 }]
        self.AnnularData = AnnularData
        self.linkList = response.data.data2
        var chartOption = {
          color: ['#78C3A0', '#D4BB41', '#3DA6D9', '#E79F82'],
          polar: {
            radius: [30, '80%']
          },
          angleAxis: {
            startAngle: 90
          },
          radiusAxis: {
            type: 'category',
          },
          textStyle: {
            color: '#fff'
          },
          tooltip: {
            trigger: "item",
            formatter: '{a}<br />{c}万'
          },
          series: AnnularData.map((item) => {
            return {
              name: item.name,
              type: 'bar',
              data: [item.data],
              roundCap: false,
              coordinateSystem: 'polar'
            }
          })
        };
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 获取滚动公告数据
    getNotice() {
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '21'
        },
      }).then(function (response) {
        self.noticeData = self.formatNotice(response.data)
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 获取banner
    getBanner() {
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '23'
        },
      }).then(function (response) {
        self.bannerData = response.data
      }).catch(function (error) {
        console.error(error)
      });
    },
    // 获取菜单
    getMenu() {
      let self = this
      this.$axios.request({
        url: "5700/home/getData",
        method: "get",
        params: {
          chartNumber: '22'
        },
      }).then(function (response) {
        self.menuData = response.data
      }).catch(function (error) {
        console.error(error)
      });
    },
    getworldmap(data) {
      var planePath =
        'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
      var myChart = this.$echarts.init(document.getElementById("world"));
      this.$echarts.registerMap('world', world)
      var allData = {
        citys: data,
        moveLines: []
      }
      var cityMap = {
        "Afghanistan": "阿富汗",
        "Singapore": "新加坡",
        "Angola": "安哥拉",
        "Albania": "阿尔巴尼亚",
        "United Arab Emirates": "阿拉伯联合酋长国",
        "Argentina": "阿根廷",
        "Armenia": "亚美尼亚",
        "French Southern and Antarctic Lands": "法属南半球和南极领地",
        "Australia": "澳大利亚",
        "Austria": "奥地利",
        "Azerbaijan": "阿塞拜疆",
        "Burundi": "布隆迪",
        "Belgium": "比利时",
        "Benin": "贝宁",
        "Burkina Faso": "布基纳法索",
        "Bangladesh": "孟加拉",
        "Bulgaria": "保加利亚",
        "Bahamas": "巴哈马",
        "Bosnia and Herz.": "波黑",
        "Belarus": "白俄罗斯",
        "Belize": "伯利兹",
        "Bermuda": "百慕大",
        "Bolivia": "玻利维亚",
        "Brazil": "巴西",
        "Brunei": "文莱",
        "Bhutan": "不丹",
        "Botswana": "博茨瓦纳",
        "Central African Rep.": "中非",
        "Canada": "加拿大",
        "Switzerland": "瑞士",
        "Chile": "智利",
        "China": "中国",
        "Côte d'Ivoire": "科特迪瓦",
        "Cameroon": "喀麦隆",
        "Dem. Rep. Congo": "刚果（金）",
        "Congo": "刚果",
        "Colombia": "哥伦比亚",
        "Costa Rica": "哥斯达黎加",
        "Cuba": "古巴",
        "Northern Cyprus": "北塞浦路斯",
        "Cyprus": "塞浦路斯",
        "Czech Rep.": "捷克",
        "Germany": "德国",
        "Djibouti": "吉布提",
        "Denmark": "丹麦",
        "Algeria": "阿尔及利亚",
        "Ecuador": "厄瓜多尔",
        "Egypt": "埃及",
        "Eritrea": "厄立特里亚",
        "Spain": "西班牙",
        "Estonia": "爱沙尼亚",
        "Ethiopia": "埃塞俄比亚",
        "Finland": "芬兰",
        "Fiji": "斐济",
        "Falkland Is.": "福克兰群岛",
        "France": "法国",
        "Gabon": "加蓬",
        "United Kingdom": "英国",
        "Georgia": "格鲁吉亚",
        "Ghana": "加纳",
        "Gambia": "冈比亚",
        "Guinea": "几内亚",
        "Guinea-Bissau": "几内亚比绍",
        "Eq. Guinea": "赤道几内亚",
        "Greece": "希腊",
        "Greenland": "格陵兰",
        "Guatemala": "危地马拉",
        "Fr. S. Antarctic Lands": "留尼汪",
        "Guyana": "圭亚那",
        "Honduras": "洪都拉斯",
        "Croatia": "克罗地亚",
        "Haiti": "海地",
        "Hungary": "匈牙利",
        "Indonesia": "印度尼西亚",
        "India": "印度",
        "Ireland": "爱尔兰",
        "Iran": "伊朗",
        "Iraq": "伊拉克",
        "Iceland": "冰岛",
        "Israel": "以色列",
        "Italy": "意大利",
        "Jamaica": "牙买加",
        "Jordan": "约旦",
        "Japan": "日本本土",
        "Kazakhstan": "哈萨克斯坦",
        "Kenya": "肯尼亚",
        "Kyrgyzstan": "吉尔吉斯斯坦",
        "Cambodia": "柬埔寨",
        "Korea": "韩国",
        "Dem. Rep. Korea": "北朝鲜",
        "Kosovo": "科索沃",
        "Kuwait": "科威特",
        "Lao PDR": "老挝",
        "Lebanon": "黎巴嫩",
        "Liberia": "利比里亚",
        "Libya": "利比亚",
        "Sri Lanka": "斯里兰卡",
        "Lesotho": "莱索托",
        "Lithuania": "立陶宛",
        "Luxembourg": "卢森堡",
        "Latvia": "拉脱维亚",
        "Morocco": "摩洛哥",
        "Moldova": "摩尔多瓦",
        "Madagascar": "马达加斯加",
        "Mexico": "墨西哥",
        "Macedonia": "北马其顿",
        "Mali": "马里",
        "Myanmar": "缅甸",
        "Montenegro": "黑山",
        "Mongolia": "蒙古",
        "Mozambique": "莫桑比克",
        "Mauritania": "毛里塔尼亚",
        "Malawi": "马拉维",
        "Malaysia": "马来西亚",
        "Namibia": "纳米比亚",
        "New Caledonia": "新喀里多尼亚",
        "Niger": "尼日尔",
        "Nigeria": "尼日利亚",
        "Nicaragua": "尼加拉瓜",
        "Netherlands": "荷兰",
        "Norway": "挪威",
        "Nepal": "尼泊尔",
        "New Zealand": "新西兰",
        "Oman": "阿曼",
        "Pakistan": "巴基斯坦",
        "Panama": "巴拿马",
        "Peru": "秘鲁",
        "Philippines": "菲律宾",
        "Papua New Guinea": "巴布亚新几内亚",
        "Poland": "波兰",
        "Puerto Rico": "波多黎各",
        "Portugal": "葡萄牙",
        "Paraguay": "巴拉圭",
        "Qatar": "卡塔尔",
        "Romania": "罗马尼亚",
        "Russia": "俄罗斯",
        "Rwanda": "卢旺达",
        "W. Sahara": "西撒哈拉",
        "Saudi Arabia": "沙特阿拉伯",
        "Sudan": "苏丹",
        "S. Sudan": "南苏丹",
        "Senegal": "塞内加尔",
        "Solomon Is.": "所罗门群岛",
        "Sierra Leone": "塞拉利昂",
        "El Salvador": "萨尔瓦多",
        "Somaliland": "索马里兰",
        "Somalia": "索马里",
        "Serbia": "塞尔维亚",
        "Suriname": "苏里南",
        "Slovakia": "斯洛伐克",
        "Slovenia": "斯洛文尼亚",
        "Sweden": "瑞典",
        "Swaziland": "斯威士兰",
        "Syria": "叙利亚",
        "Chad": "乍得",
        "Togo": "多哥",
        "Thailand": "泰国",
        "Tajikistan": "塔吉克斯坦",
        "Turkmenistan": "土库曼斯坦",
        "Timor-Leste": "东帝汶",
        "Trinidad and Tobago": "特立尼达和多巴哥",
        "Tunisia": "突尼斯",
        "Turkey": "土耳其",
        "Tanzania": "坦桑尼亚",
        "Uganda": "乌干达",
        "Ukraine": "乌克兰",
        "Uruguay": "乌拉圭",
        "United States": "美国",
        "Uzbekistan": "乌兹别克斯坦",
        "Venezuela": "委内瑞拉",
        "Vietnam": "越南",
        "Vanuatu": "瓦努阿图",
        "West Bank": "西岸",
        "Yemen": "也门",
        "South Africa": "南非",
        "Zambia": "赞比亚",
        "Zimbabwe": "津巴布韦",
        "Aland": "奥兰群岛",
        "American Samoa": "美属萨摩亚",
        "Andorra": "安道尔",
        "Anguilla": "安圭拉",
        "Antigua and Barb.": "安提瓜和巴布达",
        "Aruba": "阿鲁巴",
        "Bahrain": "巴林",
        "Barbados": "巴巴多斯",
        "Bouvet Island": "布维岛",
        "Cape Verde": "佛得角",
        "Christmas Islands": "圣诞岛",
        "Cocos (keeling) Islands": "科科斯（基林）群岛",
        "Comoros": "科摩罗",
        "Cook Islands": "库克群岛",
        "Dominica": "多米尼克",
        "Dominican Rep.": "多明尼加共和国",
        "Faeroe Is.": "法罗群岛",
        "MetropolitanFrance": "法国大都会",
        "French Polynesia": "法属波利尼西亚",
        "Gibraltar": "直布罗陀",
        "Grenada": "格林纳达",
        "Guam": "关岛",
        "Guernsey": "根西岛",
        "Isle of Man": "马恩岛",
        "Jersey": "泽西岛",
        "Kiribati": "基里巴斯",
        "Liechtenstein": "列支敦士登公国",
        "Maldives": "马尔代夫",
        "Malta": "马耳他",
        "Marshall Islands": "马绍尔群岛",
        "Mauritius": "毛里求斯",
        "Micronesia": "密克罗尼西亚",
        "Monaco": "摩纳哥",
        "Montserrat": "蒙特塞拉特",
        "Nauru": "瑙鲁",
        "Niue": "纽埃",
        "Norfolk Island": "诺福克岛",
        "Palau": "帕劳",
        "Palestine": "巴勒斯坦",
        "Pitcairn Islands": "皮特凯恩群岛",
        "Russian Federation": "俄罗斯联邦",
        "Saint Helena": "圣赫勒拿",
        "Saint Lucia": "圣卢西亚",
        "Saint Kitts-Nevis": "圣基茨和尼维斯",
        "St. Vin. and Gren.": "圣文森特和格林纳丁斯",
        "Samoa": "萨摩亚",
        "San Marino": "圣马力诺",
        "Sao Tome and Principe": "圣多美和普林西比",
        "Seychelles": "塞舌尔",
        "Tokelau": "托克劳",
        "Tonga": "汤加",
        "Tuvalu": "图瓦卢",
        "Vatican City": "梵蒂冈",
        "Wallis and Futuna": "瓦利斯群岛和富图纳群岛",
        "Yugoslavia": "南斯拉夫"
      }
      data.map(item => (
        allData.moveLines.push({
          fromName: '中国',
          toName: item.name,
          coords: [[116.416718, 39.912934], [item.value[0], item.value[1]]]
        })
      ))
      var cityData = [{ name: '中国', value: [116.416718, 39.912934, 10] }]
      var chartOption = {
        tooltip: {
          // show: false,
          formatter: function (params) {
            if (params.data) {
              return params.data.name + " : " + params.data.value[2]
            } else {
              return cityMap[params.name]
            }
          }
        },
        grid: {
          right: '8%',
        },
        geo: {
          map: 'world',
          aspectScale: 0.65, //长宽比
          zoom: 1.12,
          tooltip: {
            // show: !1,
            formatter: function (params) {
              if (params.data) return params.data.name + " : " + params.data.value[2]
            }
          },
          nameMap: cityMap,
          scaleLimit: {
            min: 1,
            max: 5,
          },
          label: {
            show: !1,
          },
          roam: false,
          itemStyle: {
            color: 'rgba(0,116,177, .6)',
            borderColor: 'rgb(79,228,255)',
            borderWidth: 1,
            normal: {
              shadowColor: "#164A7C",
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
          emphasis: {
            itemStyle: {
              areaColor: 'rgba(0,162,248, .6)',
            },
          }
        },
        series: [{
          type: "map",
          roam: false,
          label: {
            show: !1,
          },
          itemStyle: {
            normal: {
              borderColor: "#3EC3E3",
              borderWidth: 0.2,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1867B5", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#1867B5", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
            emphasis: {
              label: {
                // show: !1,
                color: "#fff",
              },
              areaColor: "#0E83B7",
              borderWidth: 0.2,
            },
          },
          aspectScale: 0.65, //长宽比
          zoom: 1.12,
          map: "world", //使用
        },
        {
          name: '地点',
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 1,
            brushType: "stroke",
            scale: 8
          },
          label: {
            normal: {
              show: true,
              position: "right",
              color: "#9966cc",
              formatter: "{b}",
              textStyle: {
                color: "#fff"
              }
            },
            emphasis: {
              show: true
            }
          },
          symbol: "pin",
          symbolSize: 20,
          itemStyle: {
            normal: {
              show: true,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#F65857", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#EC2624", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          data: cityData,
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          symbol: 'circle',
          symbolSize: 10,
          rippleEffect: {
            period: 4,
            scale: 4,
            brushType: 'stroke',
          },
          label: {
            normal: {
              show: false,
              position: "right",
              offset: [5, 0],
              formatter: "{b}",
              textStyle: {
                color: "rgb(214,206,143)",
              },
            },
          },
          emphasis: {
            show: true,
            scale: !0,
            label: {
              show: true,
              backgroundColor: "#000",
              padding: 2,
              borderRadius: 2,
              color: "#fff",
            },
          },
          symbol: "circle",
          symbolSize: "6",
          itemStyle: {
            normal: {
              show: false,
              color: "#0FD1D9",
            },
          },
          data: allData.citys,
        },
        {
          name: '线路',
          type: 'lines',
          coordinateSystem: 'geo',
          large: true,
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,
            symbolSize: 15,
          },
          lineStyle: {
            normal: {
              color: "rgb(255,236,61)",
              width: 2,
              type: 'solid',
              curveness: 0.3,
            }
          },
          label: {
            normal: {
              show: false,
              position: 'middle',
              formatter: '{b}'
            }
          },
          data: allData.moveLines,
        },
        ],
      }
      myChart.setOption(chartOption, true);
    },
    // 数据格式化
    formatNotice(data) {
      const formattedData = []
      for (const key in data) {
        const item = data[key]
        const formattedItem = {}
        formattedItem.name = key
        for (const subKey in item) {
          const value = item[subKey]
          if (value.includes('%')) {
            if (value.includes('-')) {
              formattedItem.isNegative = true
            } else {
              formattedItem.isNegative = false
            }
            formattedItem.value = value;
          } else {
            formattedItem.amount = value
          }
        }
        formattedData.push(formattedItem)
      }
      return formattedData
    }
  }
}
</script>

<style lang="less">
// background: url('../assets/image/home/bg.png') 100% 100%;
header {
  background-color: #1c1c1c;
  .notice_box {
    // width: 80vw;
    display: flex;
    align-items: center;
    margin: auto;
    .notice_icon {
      width: 24px;
      height: 24px;
    }
    .warp {
      min-width: 1024px;
      height: 45px;
      // margin: 0 auto;
      overflow: hidden;
      ul {
        font-size: 14px;
        color: #ffffff;
        font-weight: 400;
        line-height: 48px;
        display: flex;
        li {
          display: flex;
          .ratio i {
            margin-right: 3px;
          }
          .ratio.red {
            color: red;
          }
          .ratio.green {
            color: green;
          }
          span {
            margin-right: 10px;
          }
        }
      }
    }
  }
  .nav {
    width: 80vw;
    margin: 10px auto 0px;
    display: grid;
    grid-template-columns: 8fr 25fr;
    grid-column-gap: 10px;
    align-items: center;
    .logo {
      grid-area: 1 / 1 / 2 / 2;
      text-align: left;
      img {
        width: 203px;
        height: 53px;
      }
    }
    .menu {
      grid-area: 1 / 2 / 2 / 3;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          span {
            cursor: pointer;
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            line-height: 48px;
            color: #ffffff;
          }
        }
      }
    }
  }
}

.banner {
  width: 100%;
  // height: 60vh;
  background: #050506;
  .swiper {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      position: absolute;
      top: 35%;
      left: 10%;
      font-weight: 400;
      color: #ffffff;
      font-size: 48px;
      font-family: Source Han Sans CN;
      text-align: left;
    }
  }
}

.mod1 {
  width: 80vw;
  margin: auto;
  .company {
    margin-bottom: 100px;
    .annular {
      width: 50%;
      // height: 710px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      #Annular {
        width: 550px;
        height: 550px;
      }
      .legend {
        display: flex;
        justify-content: space-around;
        li {
          margin: 0 5px;
          color: #ffffff;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 34px;
          width: 153px;
          height: 34px;
          border-radius: 4px;
          display: flex;
          justify-content: space-around;
          span {
            display: flex;
            align-items: center;
          }
          .qua {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: block;
            margin-right: 3px;
          }
        }
      }
      margin-right: 18px;
    }
    #relation {
      width: 50%;
      height: 680px;
    }
  }
  .heat {
    margin-right: 55px;
    grid-area: 2 / 1 / 3 / 2;
    #heat {
      width: 550px;
      height: 590px;
      margin-top: 37px;
      background: url(../assets/image/home/bg0.png) 100% 100%;
    }
  }
  .macro {
    width: 100%;
    grid-area: 2 / 2 / 3 / 3;
    .macro_cneter {
      display: grid;
      grid-template-columns: 24fr 12fr;
      grid-template-rows: 24fr;
      grid-column-gap: 20px;
      margin-top: 37px;

      .ma_l {
        grid-area: 1 / 1 / 2 / 2;
        #quarterBar {
          width: 100%;
          height: 370px;
        }
      }
      .ma_r {
        grid-area: 1 / 2 / 2 / 3;
        position: relative;
        #quarter {
          width: 100%;
          height: 330px;
        }
        .qubg {
          position: absolute;
          left: 8%;
          top: 16%;
          width: 85%;
          height: 65%;
        }
      }
    }
    .macrolink {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      li {
        margin-right: 11px;
        margin-bottom: 12px;
        span {
          cursor: pointer;
          padding: 3px 20px;
          background: rgba(100, 125, 200, 0.47);
          border: 1px solid #647dc8;
          font-family: Source Han Sans CN;
          line-height: 28px;
          font-weight: 400;
          color: #919dd6;
          border-radius: 3px;
          font-size: 14px;
        }
      }
    }
  }
}
.mod2 {
  margin-top: 60px;
  background: url("../assets/image/home/bg1.png") 100% 100%;
  .region {
    width: 80vw;
    margin: auto;
    height: 1030px;
    .region_box {
      display: grid;
      grid-template-columns: 10fr repeat(2, 7fr);
      grid-template-rows: 24fr;
      align-items: center;
      #nation {
        width: 100%;
        height: 720px;
      }
      #province {
        width: 100%;
        height: 720px;
      }
      #county {
        width: 100%;
        height: 720px;
      }
    }
  }
}
.mod3 {
  background: url("../assets/image/home/bg2.png") 100% 100%;
  .industry {
    width: 80vw;
    margin: auto;
    // height: 925px;
    .industry_center {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 10px;
      .industry_le {
        grid-area: 1 / 1 / 2 / 2;
        #yield {
          width: 100%;
          height: 600px;
          margin-top: 20px;
        }
      }
      .industry_re {
        grid-area: 1 / 2 / 2 / 3;
        #finance {
          width: 100%;
          height: 600px;
        }
      }
    }
  }
}
.mod4 {
  .exports {
    width: 80vw;
    margin: auto;
    padding-bottom: 35px;
    .exports_box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 10px;
      .exports_le {
        grid-area: 1 / 1 / 2 / 2;
        #continent {
          width: 100%;
          height: 390px;
        }
      }
      .exports_rg {
        width: 100%;
        grid-area: 1 / 2 / 2 / 3;
        .ex_head {
          background: #202127;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ecf0ff;
          line-height: 30px;
          display: flex;
          align-items: center;
          text-align: left;
          span:nth-child(1) {
            width: 30%;
            margin-left: 25px;
          }
          span:nth-child(2) {
            width: 70%;
          }
        }
        .seamless-warp {
          height: 350px;
          overflow: hidden;
          li {
            display: flex;
            align-items: center;
          }
          li:nth-child(even) {
            background-color: #202127;
          }
          .code {
            width: 30%;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ff9324;
            line-height: 42px;
            text-align: left;
            margin-left: 25px;
          }
          .name {
            width: 70%;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #03e4e4;
            line-height: 30px;
            text-align: left;
          }
        }
      }
    }
  }
}
.mod5 {
  background-color: #1f2028;
  .PriceIndustry {
    width: 80vw;
    margin: auto;
    padding: 75px 0 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 50px;
    .price {
      #price {
        width: 100%;
        height: 360px;
        margin-bottom: 40px;
      }
    }
    .industry {
      #Mdindustry {
        width: 100%;
        height: 360px;
        margin-bottom: 40px;
      }
    }
  }
}
.mod6 {
  height: 770px;
  background: url("../assets/image/home/bg3.png") 100% 100%;
  .Subject {
    width: 80vw;
    margin: auto;
    .Subject_box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 20px;
      margin-bottom: 60px;
      .Subjec_le {
        #world {
          width: 100%;
          height: 456px;
        }
      }
      .Subjec_rg {
        #Retirement {
          width: 100%;
          height: 456px;
        }
      }
    }
  }
}
.mod7 {
  // height: 618px;
  // background: url("../assets/image/home/bg4.png") 100% 100%;
  .kno_box {
    // width: 80vw;
    display: grid;
    grid-template-columns: repeat(2, 24fr);
    grid-template-rows: 1fr;
    grid-column-gap: 27px;
    margin: 0px auto 42px;
    .kno {
      padding: 30px 95px;
      // height: 508px;
      border-top: 2px solid #ff870d;
      background: #1e1f26;
      .title {
        color: #ffffff;
        font-size: 24px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        text-align: left;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          margin-right: 25px;
          text-align: left;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 40px;
          display: flex;
          align-items: center;
          i {
            width: 5px;
            height: 5px;
            background: #ff870d;
            display: block;
            margin-right: 7px;
          }
        }
      }
    }
  }
}
.titleOne {
  padding: 60px 0 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  img:nth-child(1),
  img:nth-child(3) {
    height: 13px;
  }
  img:nth-child(2) {
    height: 30px;
    margin: 0 9px;
  }
}
.titleTow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  img:nth-child(1) {
    height: 30px;
    margin-right: 9px;
  }
  img:nth-child(2) {
    height: 13px;
  }
}
.titlwThree {
  i {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 11px solid #ff870d;
    margin-right: 6px;
    display: block;
  }
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 48px;
  display: flex;
  align-items: center;
  .unit {
    text-align: right;
    font-size: 14px;
    margin-left: 180px;
  }
}
.link {
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  li {
    margin-right: 11px;
    margin-bottom: 10px;
    border: 1px solid #008fe9;
    border-radius: 3px;
    background: rgba(0, 143, 233, 0.47);
    padding: 2px 20px;
    cursor: pointer;
    span {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #4393ff;
    }
  }
}
.link_l {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
  li {
    padding: 2px 20px;
    margin-right: 11px;
    margin-bottom: 12px;
    background: rgba(86, 115, 199, 0.47);
    border: 1px solid #5673c7;
    border-radius: 3px;
    cursor: pointer;
    span {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #6089ff;
    }
  }
}
.link_p {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 130px;
    margin-right: 11px;
    margin-bottom: 10px;
    background: rgba(47, 163, 174, 0.47);
    border: 1px solid #2fa3ae;
    opacity: 0.45;
    border-radius: 3px;
    padding: 2px 20px;
    cursor: pointer;
    span {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #6ed2db;
    }
  }
}

.worldTitle {
  text-align: left;
  font-size: 20px;
  color: #ffffff;
  font-family: "Source Han Sans CN";
}
.w100 {
  width: 100px;
}
.w150 {
  width: 150px;
}

footer {
  background-color: #1c1c1c;
  height: 62px;
  p {
    color: #9eabd1;
    line-height: 62px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
  }
}

</style>

<style>
/* // 兼容小屏幕问题 */
@media screen and (max-width: 1441px) {
  .titleOne {
    padding: 30px 0 20px;
  }
  .titleOne img:nth-child(1),
    img:nth-child(3) {
      height: 10px;
    }
  .titleOne img:nth-child(2) {
    height: 23px;
    margin: 0 7px;
  }
  .titlwThree{
    font-size: 15px;
    line-height: 36px;
  }
  .titlwThree i {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #ff870d;
    margin-right: 4px;
  }
  .Nav ul li {
    width: 110px;
  }
  header .notice_box .warp ul {
    line-height: 36px;
    font-size: 11px;
  }
  .mod1 .company .annular #Annular {
    width: 400px;
    height: 400px;
  }
  .mod1 .company #relation {
    height: 530px;
  }
  .mod1 .company {
    margin-bottom: 50px;
  }
  .mod1 .company .annular .legend {
    margin-top: 30px;
  }
  .mod1 .company .annular .legend li {
    height: 26px;
    font-size: 11px;
  }
  .mod1 .company .annular .legend li .qua {
    width: 10px;
    height: 10px;
  }
  .mod1 .macro .macro_cneter {
    margin-top: 15px;
  }
  .mod1 .heat{
    margin-right: 40px;
  }
  .mod1 .heat #heat{
    width: 415px;
    height: 440px;
    margin-top: 20px;
  }
  .mod1 .macro .macro_cneter .ma_l #quarterBar{
    height: 275px;
  }
  .mod1 .macro .macro_cneter .ma_r #quarter{
    height: 275px;
  }
  .mod1 .macro .macro_cneter .ma_r .qubg {
    top: 20%;
  }
  .mod1 .macro .macrolink li {
    margin-right: 9px;
    margin-bottom: 9px;
  }
  .mod1 .macro .macrolink li span {
    font-size: 11px;
  }
  .mod2 .region {
    height: 790px;
  }
  .mod2 .region .region_box #nation {
    height:545px;
  }
  .mod2 .region .region_box #province {
    height: 545px;
  }
  .mod2 .region .region_box #county {
    height: 545px;
  }

  .mod3 .industry .industry_center .industry_le #yield{
    height:452px;
  }
  .mod3 .industry .industry_center .industry_re #finance {
    height: 452px;
  }
  .mod4 .exports .exports_box .exports_le #continent {
    height: 290px;
  }
  .mod4 .exports .exports_box .exports_rg .seamless-warp {
    height: 290px;
  }
  .mod5 .PriceIndustry .price #price {
    height: 280px;
    margin-bottom: 20px;
  }
  .mod5 .PriceIndustry .industry #Mdindustry {
    height: 280px;
    margin-bottom: 20px;
  }
  .mod6 {
    height:578px;
  }
  .mod6 .Subject .Subject_box .Subjec_rg #Retirement{
    height: 340px;
  }
  .mod6 .Subject .Subject_box .Subjec_le #world {
    height: 240px;
  }
  .link li span {
    font-size: 11px;
  }
  .link_l li span {
    font-size: 11px;
    padding: 2px 20px;
  }
  .link_p li span {
    font-size: 11px;
  }
  .titleTow img:nth-child(1) {
    height: 23px;
  }
  .titleTow img:nth-child(2) {
    height: 10px;
  }
}
</style>